<template>
	<div>
		<div style="display: flex;justify-content: space-between;">
			<h4></h4>
			<h3>登分管理 - 【 批量登分 】</h3>
			<h4>当前班级：{{data.clzno}}</h4>
			<h4>当前课程：{{data.cno}}</h4>
			<h4><button @click="addMark()">批量提交</button></h4>
		</div>
		<hr >
		<table style="width: 90%;line-height: 36px;">
			<tr >
				<td>学生电话</td>
				<td>学生姓名</td>
				<td>班级名称</td>
				<td>课程名称</td>
				<td>成绩</td>
			</tr>
			<tr v-for="m in data.masks">
				<td>{{m.sno}}</td>
				<td>{{m.user.uname}}</td>
				<td>{{m.user.clz.clzname}}</td>
				<td>{{m.course.cname}}</td>
				<td><input style="width: 36%" @change="go2Add(m)"  
				v-model="m.score" type="text"/>
				</td>
			</tr>
		</table>
		
	</div>
</template>

<script setup>
	
	import { ref , reactive , onMounted ,} from "vue"
	import {$get , $postf , $postj} from "../../ajax/index.js"
	import myalert from "../../utils/myalert.js"
	import router from "../../router/index.js"
	import { useRoute } from 'vue-router';
	const route = useRoute();
	const data = reactive({
		masks :[],
		maskAdd :[],
		clzno :'',
		cno :'',
	})
    //这个是记录修改过分数的方法
	const go2Add=(m)=>{
        //数据有变动直接调用方法进行保存
		console.log("教师登分去添加");console.log(m);
		 let mark = {
			 id : m.id,
			 sno : m.sno,
			 cno : m.course.cno,
			 score : m.score
			 }
			 //保存已更改的分数
		data.maskAdd.push(mark);
	}
	const addMark=()=>{
		console.log("教师登分添加");console.log(data.maskAdd);
		
		$postj("/api/fore/tea/addMark",data.maskAdd
		).then((resp)=>{
			console.log("新成绩表");
			//刷新数据
			findAll();
			myalert("提交成功......");
		})
	}
	
	const findAll=()=>{
		let fd = new FormData();
		fd.append("clzno",data.clzno);
		fd.append("cno",data.cno);
		//用fd 和 postf 是觉得用这个看着好看
		$postf("/api/fore/tea/findMark",fd
		).then((resp)=>{
			console.log(resp.data.data);
			data.masks = resp.data.data;
		})
	}
	
	onMounted( ()=>{
		console.log("初始化加载数据...."); console.log(route.query);
		data.clzno = route.query.clzno;
		data.cno = route.query.cno;
		console.log("clzno:"+data.clzno);console.log("cno:"+data.cno);
		findAll();	
	})
</script>

<style>
</style>
